<template>
  <view class="notifyItemBg">
    <view class="notifyItem">
      <view class="notifyItem-top row-center">
        <image
          class="notifyItem-top-icon"
          src="@/pagesA/static/images/common/message_notification_icon.png"
        ></image>
        <text class="fontBold16 color333">{{ data.title }} </text>
        <!-- <view class="redDot"></view> -->
      </view>
      <up-parse
        class="color666 font14 notifyItem-content"
        :content="data.content"
      ></up-parse>
      <view class="notifyItem-bottom row-center">
        <text class="color999 font12 notifyItem-bottom-time1">
          {{ data.createdAt }}</text
        >
        <kk-button
          class="notifyItem-bottom-btn"
          text="去答疑"
          @tap="goAnswer"
        />
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onLoad, onShow } from "@dcloudio/uni-app";
import { onMounted } from "vue";
import { ref } from "vue";

const props = defineProps({
  data: {
    type: Object,
    default: {},
  },
});

onLoad((options) => {});

const goAnswer = () => {
  console.log("goAnswer");
};
</script>

<style lang="scss" scoped>
.notifyItemBg {
  margin-left: 24rpx;
  margin-right: 24rpx;
  margin-bottom: 24rpx;
  background: #ffffff;
  border-radius: 16rpx;
  .notifyItem {
    padding: 24rpx;
    &-top {
      &-icon {
        width: 48rpx;
        height: 48rpx;
        margin-right: 16rpx;
      }
    }
    &-content {
      margin-top: 24rpx;
      margin-bottom: 16rpx;
      line-height: 36rpx;
    }
    &-bottom {
      height: 50rpx;
      &-btn {
        margin-left: auto;
      }
    }
  }
  .redDot {
    margin-left: 10rpx;
    width: 12rpx;
    height: 12rpx;
    border-radius: 6rpx;
    background: red;
  }
}
</style>
